<template>

  <div>
    <div id="bindBankInfor">

      <div class="BankNumber_infor">
        <ul>
          <li><p>持卡人</p><p> <input type="text" placeholder="请输入真实姓名" id="true_name" v-model="true_name"></p></li>
          <li style="border-bottom: 0"><p>身份证号</p> <p><input type="text" placeholder="仅支持中国大陆身份证号" id="id_number" v-model="id_number"></p></li>
        </ul>
      </div>
      <div class="BankNumber_infor">
        <ul>
          <li><p>银行卡号</p><p> <input type="text" placeholder="请输入储蓄卡卡号" id="card_no" v-model="card_no"></p></li>
        </ul>
      </div>
      <div class="BankNumber_infor">
        <ul>
          <li style="border-bottom: 0"><p>预留手机</p> <p><input type="text" placeholder="请输入银行预留手机号" id="mobile" v-model="mobile"></p></li>

        </ul>

      </div>

      <div class="personInfor_Btn">
        <button @click="bankSuccess()">确定</button>
      </div>


      <div class="tibind" v-show="tibind">
        <p>{{bindMessage}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name:'jumpBankCard',
    data() {
      return {
        AuthTokenBank:'',
        true_name:'',
        id_number:'',
        card_no:'',
        mobile:'',
        tibind:false,
        bindMessage:'',
        times:2000
      }
    },
    created(){
      var that = this;
      that.AuthTokenBank = sessionStorage.getItem('AuthToken');
      console.log(that.AuthTokenBank)
    },
    methods: {
      bankSuccess() {
        var that=this
        if(that.true_name==''||that.id_number==''||that.card_no==''||that.mobile==''){
          that.tibind=true;
          that.bindMessage='请填写完整信息！';
          window.setTimeout(function () {
            that.tibind = false;
          }, that.times);
        }else {
          axios.post('http://test.zjapi.xianxiangle.com/user/bind_bank',
            {AuthToken:this.AuthTokenBank,
              true_name:this.true_name,
              id_number:this.id_number,
              card_no:this.card_no,
              mobile:this.mobile,
            }
          ).then(function (res) {
            console.log(res.data);
            console.log(res.data.message);
            that.tibind=true;
            that.bindMessage=res.data.message;
            window.setTimeout(function () {
              that.tibind = false;
              that.$router.push({path:'/pay'});
            }, that.times);

          }).catch(function (err) {

          })
        }

      }
    },
//   components: {
//     AppHeader
//   }
  }
</script>

<style lang="scss" scoped>
  *{
    text-align: left;
  }
  #bindBankInfor {
    width: 100%;
    margin: auto;
    header {
      width: 100%;
      background: white;
      padding: 0.6rem 0 0.6rem 0;
      border-bottom: 1px solid #e3e3e3;
      display: flex;
      justify-content: space-between;
      img {
        width: 1.4rem;
        height: 2rem;
        padding: 0.6rem;
      }
      p {
        font-size: 1.6rem;
        padding: 0.5rem;
        color: #333333;
        text-align: center;
      }
    }

    .BankNumber_infor {
      width: 100%;
      margin: auto;
      background: white;
      //margin-top: 1rem;
      ul {
        width: 100%;
        margin: auto;
        li {
          width: 90%;
          height: 3rem;
          line-height: 3rem;
          padding: 1rem 0 1rem 0rem;
          display: flex;
          justify-content: start;
          margin: auto;
          border-bottom: 1px solid #ccc;
          font-family:PingFangSC-Medium;
          //font-weight: 700;
          //border: 1px solid;
          p {
            //font-size: 2rem;
            font-size: 1.6rem;
            //font-family: 'PingFangSC-Medium';
          }
          p:nth-child(1) {
            width: 20%;
            height: 3rem;
            line-height: 3rem;
            text-align: center;
          }
          p:nth-child(2) {
            width: 50%;
            height: 3rem;
            line-height: 3rem;
            input {
              width: 100%;
              padding-left: 5%;
              height: 3rem;
              line-height: 3rem;
              outline: none;
              border: 0;
              position: relative;
              right: 3rem;
            }
          }
        }
      }
    }
    .personInfor_Btn {
      width: 100%;
      margin-top: 4rem;
      text-align: center;
      button {
        width: 90%;
        height: 3.2rem;
        line-height: 3.2rem;
        background: #32D69C;
        text-align: center;
        color: white;
        border: 0;
        outline: none;
        border-radius: 2rem;
        font-size: 1.4rem;
      }
    }
  }

  .tibind{
    width: 100%;
    /*display: none;*/
    margin: auto;
    margin-top: 1rem;
    p{
      width: 80%;
      background:rgba(0,0,0,0.4);
      border-radius: 0.3rem;
      color: white;
      padding: 0.5rem;
      text-align: center;
      height: 2rem;
      line-height: 2rem;
      font-size: 1.6rem;
      margin: auto;
    }
  }
</style>
